<template>
    <div class="newenergy">
        <div class="paihang">
            <img src="@/assets/img/paihang.png" alt="">
            <ul class="list">
                <li>销量排行</li>
                <li>上市新车</li>
                <li>续航排行</li>
                <li>易车充电</li>
                <li>购车计算器</li>
            </ul>
        </div>
        <div class="xiaoliang">
            <div class="top">
                <div class="left">
                    <span>销量排行</span>
                </div>
                <div class="right">
                    更多<span class="iconfont icon-arrow-right"></span>
                </div>
            </div>
            <div class="bottom">
                <img src="@/assets/img/che.png" alt="">
                <ul class="list">
                    <li>查报价单</li>
                    <li>查报价单</li>
                    <li>查报价单</li>
                    <li>查报价单</li>
                </ul>
            </div>
        </div>
        <div class="pinpai">
            <span class="first">热门品牌</span>
            <span>品牌选车</span>
            <span>条件选车</span>
        </div>
        <div class="leixing">
            <img src="@/assets/img/pinpai.png" alt="">
            <ul class="price">
                <li class="first">价格</li>
                <li>5万以下</li>
                <li>5-8万</li>
                <li>12-18万</li>
                <li>18万以上</li>
            </ul>
            <ul class="endurance">
                <li class="first">续航</li>
                <li>200-300</li>
                <li>300-400</li>
                <li>400-500</li>
                <li>500以上</li>
            </ul>
            <ul class="classified">
                <li class="first">类别</li>
                <li>纯自动</li>
                <li>插电混动</li>
                <li>SUV</li>
                <li>自主品牌</li>
            </ul>
        </div>
        <div class="letter">
            <span>A</span>
        </div>
        <div class="car">
            <ul class="list">
                <li>
                    <img src="@/assets/img/aodi.png" alt="">
                    <span>奥迪</span>
                </li>
                <li>
                    <img src="@/assets/img/aian.png" alt="">
                    <span>埃安</span>
                </li>
                <li>
                    <img src="@/assets/img/aici.png" alt="">
                    <span>爱驰</span>
                </li>
                <li>
                    <img src="@/assets/img/aito.png" alt="">
                    <span>AITO</span>
                </li>
                <li>
                    <img src="@/assets/img/aweita.png" alt="">
                    <span>阿维塔</span>
                </li>
                <li>
                    <img src="@/assets/img/keche.png" alt="">
                    <span>安凯客车</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    .newenergy{
        // width: 100%;
        background-color: #F0F8FA;
        .paihang{
            img{
                width: 350px;
                height: 40px;
                padding-left: 20px;
                padding-top: 10px;
            }
            .list{
                display: flex;
                padding-left: 5px;
                li{
                    padding-left: 10px;
                }
            }
        }
        .xiaoliang{
            width: 360px;
            height: 180px;
            background-color: #FFFFFF;
            border-radius: 10px;
            margin-top: 10px;
            margin-left: 7px;
            .top{
                display: flex;
                padding-top: 10px;
                padding-left: 10px;
                .left{
                    span{
                        font-size: 18px;
                        font-weight: 700;
                    }
                }
                .right{
                    padding-left: 230px;
                }
            }
            .bottom{
                img{
                    width: 360px;
                    height: 110px;
                }
                .list{
                    display: flex;
                    padding-left: 3px;
                    li{
                        width: 80px;
                        height: 25px;
                        background-color: #F0F4FF;
                        padding-left: 6px;
                        border-radius: 10px;
                    }
                }
            }
        }
        .pinpai{
            margin-left: 10px;
            margin-top: 10px;
            span{
                padding-left: 10px;
                color: #8D919C;
            }
            .first{
                font-size: 20px;
                font-weight: 700;
                color: black;
            }
        }
        .leixing{
            width: 360px;
            height: 220px;
            background-color: #FFFFFF;
            border-radius: 10px;
            margin-top: 10px;
            margin-left: 7px;
            img{
                width: 350px;
                height: 80px;
                padding-top: 5px;
            }
            .price{
                display: flex;
                padding-left: 7px;
                li{
                    padding-left: 18px;
                    padding-top: 15px;
                }
                .first{
                    font-size: 15px;
                    font-weight: 700;
                }
            }
            .endurance{
                display: flex;
                padding-left: 7px;
                li{
                    padding-left: 14px;
                    padding-top: 15px;
                }
                .first{
                    font-size: 15px;
                    font-weight: 700;
                }
            }
            .classified{
                display: flex;
                padding-left: 6px;
                li{
                    padding-left: 18px;
                    padding-top: 15px;
                }
                .first{
                    font-size: 15px;
                    font-weight: 700;
                }
            }
        }
        .letter{
            margin-top: 14px;
            margin-left: 20px;
            span{
                font-size: 17px;
                font-weight: 700;
                color: #9B9DB4;
            }
        }
        .car{
            width: 360px;
            height: 350px;
            background-color: #FFFFFF;
            border-radius: 10px;
            margin-left: 8px;
            margin-top: 16px;
            .list{
                li{
                    width: 360px;
                    height: 40px;
                    margin-top: 8px;
                    img{
                        width: 100px;
                        height: 40px;
                    }
                    span{
                        padding-left: 10px;
                    }
                }
            }
        }
    }
</style>